<template>
    <div>
        <a-card class="searchForm mb-twelve">
            <a-form-model :model="searchForm" layout="inline" :colon="false">
                <a-form-model-item label="设备名称" prop="device_name">
                    <a-input v-model="searchForm.device_name" placeholder="请输入设备名称" style="width: 230px;color: #000" />
                </a-form-model-item>
                <a-form-model-item label="预警时间" prop="alertTime">
                    <a-range-picker format="YYYY-MM-DD" @change="onChanges" v-model="searchForm.alertTime" style="width: 230px;">
                        <a-icon slot="suffixIcon" type="calendar" />
                    </a-range-picker>
                </a-form-model-item>
                <a-form-model-item label="确认状态" prop="confirmStatus">
                    <a-select v-model="searchForm.confirmStatus" placeholder="请选择" allowClear style="width:230px">
                        <a-select-option v-for="(item, index) in confirmStatusList" :value="item.id" :key="index">
                            {{ item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="预警内容" prop="alertContent">
                    <a-input v-model="searchForm.alertContent" placeholder="请输入预警内容" style="width:230px;color: #000" />
                </a-form-model-item>
                <a-form-model-item label="报警标题" prop="alertTitle">
                    <a-select v-model="searchForm.alertTitle" placeholder="请选择" allowClear style="width:230px;color: #000">
                        <a-select-option v-for="(item, index) in alertTitleList" :value="item.id" :key="index">
                            {{ item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="恢复正常" prop="recoverNormal">
                    <a-select v-model="searchForm.recoverNormal" placeholder="请选择" allowClear style="width:230px">
                        <a-select-option v-for="(item, index) in recoverNormalList" :value="item.id" :key="index">
                            {{ item.name }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item>
                    <a-button @click="search()" type="primary">查询</a-button>
                    <a-button @click="reset" class="btn-reset">重置</a-button>
                </a-form-model-item>
            </a-form-model>
        </a-card>
        <a-card>
            <div class="flex align-center card-hr">
                <div class="a-card-title">预警列表</div>
                <!-- <div> </div> -->
            </div>
            <div class="mb-sixteen">
                <a-table bordered :rowKey="(record, index) => {
                return index;
            }
                " :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
                    :data-source="list" :loading="loading" :pagination="false" :scroll="{ x: '100%' }">
                  <template slot="warn_priority" slot-scope="text,record">
                    <div v-if="record.warn_priority=='red'" style="color: red">高</div>
                    <div v-if="record.warn_priority=='yellow'" style="color: yellow" >中</div>
                    <div v-if="record.warn_priority=='blue'" style="color: blue">低</div>
                  </template>
                  <template slot="status" slot-scope="text,record">
                    <div v-if="record.status==0" >未确认</div>
                    <div v-if="record.status==1" >确认</div>
                  </template>
                  <template slot="online_status" slot-scope="text,record">
                    <div v-if="record.online_status==0" >已恢复</div>
                    <div v-if="record.online_status==1" >未恢复</div>
                  </template>
                    <template slot="action" slot-scope="text,record">
                        <a-button @click="handleOpen(record)" type="link"> 预警详情 </a-button>
                        <a-button @click="handleWarn(record)" type="link"> 确认 </a-button>
                    </template>
                </a-table>

            </div>
            <div class="text-right" v-if="total > 0">
                <a-pagination :total="total" :current="searchForm.page" :page-size.sync="searchForm.pageSize"
                    :page-size-options="$pageSizeOptions" @change="handlePageNo" @showSizeChange="showSizeChange"
                    show-size-changer />
            </div>
        </a-card>

        <!-- 详情 -->
        <a-modal title="预警详情" v-model="visible" :maskClosable="false" :width="1000" centered :footer="null">
            <div class="hTitle"> 预警信息 </div>
            <div class="mb-sixteen">
                <a-descriptions bordered :column="2" >
                    <a-descriptions-item label="预警标题">
                        {{alertInfo.alertTitle}}
                    </a-descriptions-item>
                    <a-descriptions-item label="设备名称">
                      {{alertInfo.deviceName}}
                    </a-descriptions-item>
                    <a-descriptions-item label="预警时间">
                        {{alertInfo.alertTime}}
                    </a-descriptions-item>
                    <a-descriptions-item label="优先级">
                      {{alertInfo.priority}}
                    </a-descriptions-item>
                    <a-descriptions-item label="确认状态">
                      {{alertInfo.confirmStatus}}
                    </a-descriptions-item>
                    <a-descriptions-item label="恢复正常">
                      {{alertInfo.recoverNormal}}
                    </a-descriptions-item>
                    <a-descriptions-item label="报警内容">
                      {{alertInfo.alertContent}}
                    </a-descriptions-item>

                </a-descriptions>
            </div>
            <div class="hTitle"> 故障信息 </div>
            <div class="mb-sixteen">
                <a-descriptions bordered :column="2">
                    <a-descriptions-item label="故障来源">
                        {{alertInfo.faultSource}}
                    </a-descriptions-item>
                    <a-descriptions-item label="故障类型">
                      {{alertInfo.faultType}}
                    </a-descriptions-item>
                    <a-descriptions-item label="设备年龄">
                      {{alertInfo.deviceAge}}
                    </a-descriptions-item>
                    <a-descriptions-item label="所属部件">
                      {{alertInfo.componentPart}}
                    </a-descriptions-item>
                    <a-descriptions-item label="故障现象"  :span="2">
                      {{alertInfo.faultPhenomenon}}
                    </a-descriptions-item>
                    <a-descriptions-item label="解决方案" :span="2">
                       {{alertInfo.solutionMethod}}
                    </a-descriptions-item>
                    <a-descriptions-item label="补充说明" >
                      {{alertInfo.supplementaryExplanation}}
                    </a-descriptions-item>

                </a-descriptions>
            </div>
            <div class="flex align-center justify-center">
                <a-button @click="visible = false" type="primary">确定</a-button>
            </div>
        </a-modal>

        <!-- 确认预警 -->
        <a-modal title="确认预警" v-model="warnVisble" :maskClosable="false" :width="445" centered :footer="null">
            <div>
                <a-form-model ref="ruleForm" :model="form" :rules="rules" :colon="false" :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 16 }">
                    <a-form-model-item label="处理措施" prop="content">
                        <a-textarea v-model="form.content" :autoSize="{ minRows: 4, maxRows: 6 }"
                            placeholder="请输入处理措施" />
                    </a-form-model-item>
                </a-form-model>
            </div>
            <div class="flex align-center justify-center">
                <a-button @click="warnVisble = false"
                    style="margin-left: 8px;background: #fff;color: #2C3360;border-color: #fff;margin-right: 15px">取消</a-button>
                  <a-button @click="confirm" type="primary">确定</a-button>
            </div>
        </a-modal>
    </div>
</template>

<script>
import {dataSource as ds} from "@/services";
import {getWarningDatasList,searchWarningDatas} from "@/services/warning";

const columns = [
    {
        title: '设备名称',
        dataIndex: 'device_name',
    },
    {
        title: '预警标题',
        dataIndex: 'warn_title',
    },
    {
        title: '预警内容',
        dataIndex: 'warn_content',
    },
    {
        title: '预警时间',
        dataIndex: 'warn_time',
    },
    {
        title: '优先级',
        dataIndex: 'warn_priority',
      scopedSlots: { customRender: 'warn_priority' },
    },
    {
        title: '确认状态',
        dataIndex: 'status',
      scopedSlots: { customRender: 'status' },
    },
    {
        title: '恢复正常',
        dataIndex: 'online_status',
      scopedSlots: { customRender: 'online_status' },
    },
    {
        title: '操作',
        scopedSlots: { customRender: 'action' },
        width: 180
    }
]
export default {
    name: "earlyWarning",
    data() {
        return {
            columns,
          alertInfo:{},
            list: [],
            selectedRowKeys: [],
          confirmStatusList:[{name:'已确认',id:1},{name:'未确认',id:2}],
          recoverNormalList:[{name:'已恢复',id:1},{name:'未恢复',id:2}],
          alertTitleList:[{name:'标题1',id:1},{name:'标题2',id:2}],
            searchForm: {
                page: 1,
              pageSize: 15
            },
            total: 0,
            visible: false,
          loading: false,
            form: {
                content: '',
            },
            rules: {
                content: [
                    { required: true, message: '请输入处理措施', trigger: 'blur' },
                ],
            },
            warnVisble: false
        }
    },
  mounted() {
    this.getData();
  },
    methods: {
      confirm(){
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            ds.submitpost(this.form).then(res => {
              console.log(res);
              this.$message.success('提交成功')
              this.form.content='';
              this.getData();
              this.warnVisble=false;
            })
          }

        })
      },
      //搜索
      //搜索
      search(){
        this.searchForm.page=1;
        //
        if(this.searchForm.device_name){
          let data={
            device_name:this.searchForm.device_name,
          }
          searchWarningDatas(data).then((res) => {
            this.list = res
            // this.total =10
          }).catch(() => {

          });
        }else {
          this.getData()
        }

      },
      //重置
      reset(){
        this.searchForm={
          page: 1,
          pageSize: 15
        }
        this.getData()
      },
      getData() {
        // this.list=[]
        let data={
          pageNum: this.searchForm.page,
          pageSize: this.searchForm.pageSize
        }
        this.loading=true;
        getWarningDatasList(data).then((res) => {
          this.loading=false;
          this.list = res.warnList
          this.total =Number(res.totalPages)*this.searchForm.pageSize
        }).catch(() => {

        });
      },
      onChanges(date, dateString) {
        this.searchForm.alertTime=dateString;
        this.searchForm.startTime=dateString[0];
        this.searchForm.endTime=dateString[1];
      },
        handleWarn(row) {
            console.log(row)
            this.warnVisble = true
        },
        handleOpen(row) {
          ds.getDetials({id:row.id,type:2}).then(res => {
            this.alertInfo = res.data.data;
            this.visible = true
          })

        },
        onSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
        },
        showSizeChange(current, pageSize) {
            this.searchForm.pageSize = pageSize
          this.getData()
        },
        handlePageNo(current) {
            this.searchForm.page = current
          this.getData()
        },
    }
}
</script>
<style scoped lang="less">
.searchForm /deep/.ant-select-selection{
  color: #000 !important;
}
.searchForm /deep/.ant-input{
  color: #000;
}
/deep/.ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/.ant-pagination-next .ant-pagination-item-link {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}

/deep/ .ant-pagination-item {
    background-color: #42487A;
    border-color: #999da0;

}

/deep/ .ant-pagination-item a {
    color: #898a94;
}

/deep/ .ant-pagination-item-active {
    border-color: #fff;
}

/deep/ .ant-pagination-item-active a {
    color: #fff;
}

/deep/ .ant-select-selection {
    background-color: #42487A;
    border-color: #999da0;
    color: #898a94;
}
</style>
